<template>
  <div class="common-layout">
    <el-container>
      <el-header>
          <Header />
        </el-header>
      <el-container>
        <el-aside width="180px">
        <Layout />
      </el-aside>
        <el-main>
          <div class="home-box" v-loading="loading">
            <div class="operate">
              <div class="button-group ">
                <el-button type="primary" class="shadow-lg" @click="isEdit = true">
                  编辑<el-icon class="el-icon--right">
                    <Edit />
                  </el-icon>
                </el-button>
                <el-button type="primary" class="shadow-lg" @click="submitFile">
                  提交<el-icon class="el-icon--right">
                    <Upload />
                  </el-icon>
                </el-button>
              </div>
            </div>
            <div class="mt-2 ml-6"> <span class="text-blue-700 text-lg">*</span> <span class="text-lg">基本信息</span></div>
            <div class="main-content shadow-lg rounded-md m-2">
              <tip></tip>
              <div class="form p-4">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="任务名称" >
                    <el-input v-model="formInline.itemName" readonly style="width: 240px;" />
                  </el-form-item>
                  <el-form-item label="设备名称" >
                    <el-input v-model="formInline.deviceName" readonly />
                  </el-form-item>
                  <el-form-item label="总工时" >
                    <el-input v-model="formInline.allHours" readonly />
                  </el-form-item>
                  <el-form-item label="项目时间" >
                    <el-input v-model="formInline.hours" readonly />
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="mt-2 ml-6"> <span class="text-blue-700 text-lg">*</span> <span class="text-lg">危险源及环境因素</span>
            </div>
            <div class="main-content danger-box shadow-lg rounded-md m-2">
              <tip></tip>
              <div class="form p-4">
                <!-- <dangerBox :isEdit="isEdit" :data="dangerData"></dangerBox> -->
                <tempDanger :isEdit="isEdit" :dangerData="dangerData"></tempDanger>
              </div>
            </div>
            <div class="mt-2 ml-6"> <span class="text-blue-700 text-lg">*</span> <span
                class="text-lg">人、机、料、时间投入情况</span>
            </div>
            <div class="main-content item-box shadow-lg rounded-md m-2">
              <tip></tip>
              <div class="form p-4">
                <materail :isEdit="isEdit" :materailData="materailData"></materail>
                <!-- <optionBox :isEdit="isEdit" :materailData="materailData"></optionBox> -->
              </div>
            </div>
            <div class="mt-2 ml-6"> <span class="text-blue-700 text-lg">*</span> <span class="text-lg">工序步骤</span>
            </div>
            <div class="main-content flow-box shadow-lg rounded-md">
              <tip></tip>
              <div class="form p-4">
                <!-- <flowChart :isEdit="isEdit" :flowArray="flowArray"></flowChart> -->
                <flowNode :isEdit="isEdit" :flowArray="flowArray"></flowNode>
              </div>
            </div>
          </div>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
// import flowChart from "@/components/flow.vue"
import flowNode from '@/components/flowNode.vue'
// import jsonData from '@/common/predicted.json'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ChatAPI } from '@/api/index';
import { useChatStore } from '@/store/chat'
import tip from '../components/tip.vue'
// import optionBox from '../components/option.vue'
import materail from '../components/materail.vue'

// import dangerBox from '../components/danger.vue'
import tempDanger from '../components/tempDanger.vue'
import { useStorage } from '@vueuse/core'

const useChat = useChatStore()
const loading = ref(true)
// const dangerFileData = ref({})
const result = ref({})
const materailData = ref({
  material: '',
  people: '',
  machine: ''
})
const dangerData = ref({
  dange: '',
  file: ''
})
const flowArray = ref([])
const isEdit = ref(false)
const submitFile = () => {

}
const formInline = reactive({
  deviceName: '',
  deviceCode: '',
  hours: '',
  itemName: '',
  allHours:''
})
const result2 = {
  "设备": "去毛刺机刀具更换",
  "危险源及环境因素": "动火等级: 1. 机械伤害、物体打击、临边作业、行车吊物 2. 火灾、爆炸、静电放电、电弧、电弧光 3. 灼烫、溶解、蒸发、喷溅、喷淋、吊装、操作人员受伤、设备设施损坏、安全环境受到破坏 需用工机具及编号:常用工具,毛刺机专用工具1个,内六角1套,安全带3条,活动板手12寸2把,开口板手17-192把,手锤8磅1把,手锤14磅1把,锉刀1把,需用材料:常用材料,破布2kg,清洗剂2瓶需要人数:4人工种代码:钳工：QG1、QG2、QG",
  "动火等级、灭火器材": "动火等级: 1. 机械伤害、物体打击、临边作业、行车吊物 2. 火灾、爆炸、静电放电、电弧、电弧光 3. 灼烫、溶解、蒸发、喷溅、喷淋、吊装、操作人员受伤、设备设施损坏、安全环境受到破坏 ",
  "需用工机具及编号": "常用工具,毛刺机专用工具1个,内六角1套,安全带3条,活动板手12寸2把,开口板手17-192把,手锤8磅1把,手锤14磅1把,锉刀1把,",
  "需用材料": "常用材料,破布2kg,清洗剂2瓶",
  "需要人数": "4人",
  "工种代码": "钳工：QG1、QG2、QG3",
  "工时工序": {
    "步序编号1": {
      "工时": "0.5h,",
      "步序": "1_2,",
      "作业方法": "三方确认挂牌,",
      "作业人员代码": "钳工1、点检、生产,",
      "使用工具、材料编号": ",",
      "危险源": "机械伤害,",
      "安全措施": "三方确认挂牌，停电确认,",
      "技术要点": ""
    },
    "步序编号2": {
      "工时": "1h,",
      "步序": "2_3,",
      "作业方法": "安装，使用毛刺机专用工具，拆除毛刺机刀座,",
      "作业人员代码": "钳工2、钳工3,",
      "使用工具、材料编号": "毛刺机专用工具1个内六角1套安全带3条手锤8磅1把,",
      "危险源": "临边作业,物体打击,",
      "安全措施": "戴好安全带；或安全网、平台围栏、跳板搭设牢固,正确使用工器具,",
      "技术要点": ""
    },
    "步序编号3": {
      "工时": "1h,",
      "步序": "3_4,",
      "作业方法": "拉出毛刺机刀座螺栓,",
      "作业人员代码": "钳工2、钳工3,",
      "使用工具、材料编号": ",",
      "危险源": "临边作业,物体打击,",
      "安全措施": "戴好安全带；或安全网、平台围栏、跳板搭设牢固,正确使用工器具,",
      "技术要点": ""
    },
    "步序编号4": {
      "工时": "1h,",
      "步序": "4_5,",
      "作业方法": "拿出旧刀座，打磨轴孔,",
      "作业人员代码": "钳工2、钳工3,",
      "使用工具、材料编号": "毛刺机专用工具1个内六角1套安全带3条手锤8磅1把锉刀1把,",
      "危险源": "物体打击,临边作业,行车吊物,",
      "安全措施": "正确使用工器具,戴好安全带；或安全网、平台围栏、跳板搭设牢固,及时避让,",
      "技术要点": ""
    },
    "步序编号5": {
      "工时": "1h,",
      "步序": "4_5,",
      "作业方法": "更换新刀座,",
      "作业人员代码": "钳工2、钳工3,",
      "使用工具、材料编号": "毛刺机专用工具1个内六角1套安全带3条手锤8磅1把,",
      "危险源": "物体打击,临边作业,行车吊物,",
      "安全措施": "正确使用工器具,戴好安全带；或安全网、平台围栏、跳板搭设牢固,及时避让,",
      "技术要点": ""
    },
    "步序编号6": {
      "工时": "1h,",
      "步序": "6_7,",
      "作业方法": "使用专用工具压下刀座，螺栓安装,",
      "作业人员代码": "钳工2、钳工3,",
      "使用工具、材料编号": ",",
      "危险源": "临边作业,物体打击,",
      "安全措施": "戴好安全帽；或安全网、平台围栏、跳板搭设牢固,正确使用工器具,",
      "技术要点": "螺栓对角紧固扭距130-230MPa"
    },
    "步序编号7": {
      "工时": "0.5h,",
      "步序": "9_10,",
      "作业方法": "清理、清扫,",
      "作业人员代码": "钳工2、钳工3、起重1,",
      "使用工具、材料编号": ",",
      "危险源": ",",
      "安全措施": "戴好安全帽；或安全网、平台围栏、跳板搭设牢固,正确使用工器具,",
      "技术要点": ""
    }
  }
}
let result3 = {
  "设备": "修磨油压系统油箱清洗加油",
  "总工时": "48h",
  "项目时间": "8h",
  "编制时间": "2024.04.17",
  "危险源及环境因素": " 受限空间、滑跌伤害、起重伤害、照明不良、触电、机械伤害、物体打击、 ",
  "动火等级、灭火器材": " 无 ",
  "需用工机具及编号": "常用工具,活动扳手12″2把,开口扳手17-19″22-24″2把,氧气检测仪,鼓风机,拖线盘220V1个,防爆照明灯12V1个,加油泵1个,泄压管1根,卸扣2T2个,手锤4Br1把,吊带2条,内六角1套,管钳18″2把,无尘服2套, ",
  "需用材料": "常用材料,破布,吸油毡,密封胶,废油桶,面团 ",
  "需要人数": "6人 ",
  "工种代码": "钳工：QG1、QG2、QG3、QG4、QG5;焊工：;起重：QZ1 ",
  "工时工序": {
    "步序编号1": {
      "工时": "0.5h,",
      "步序": "1->2,",
      "作业方法": "到施工现场查看设备确定位置，将使用的工具、材料准备好并摆放整齐,",
      "作业人员代码": "钳工2、钳工3、钳工4、钳工5,",
      "使用工具、材料编号": ",",
      "危险源": "搬抬工具及备件挤压伤人。,",
      "安全措施": "检修现场围好安全绳挂检修旗，施工前做好安全技术交底。,",
      "技术要点": ""
    },
    "步序编号2": {
      "工时": "0.5h,",
      "步序": "1->3,",
      "作业方法": "三方确认停电挂牌,",
      "作业人员代码": "钳工1、点检、生产,",
      "使用工具、材料编号": ",",
      "危险源": "1、机械伤害,",
      "安全措施": "1.三方确认停电挂牌,",
      "技术要点": ""
    },
    "步序编号3": {
      "工时": "1h,",
      "步序": "3->4,",
      "作业方法": "废油排出,",
      "作业人员代码": "钳工1、钳工2、钳工3、钳工4,",
      "使用工具、材料编号": "常用材料,破布,吸油毡,密封胶,废油桶,面团、E、G、H、6人、2、4,",
      "危险源": "1、滑跌伤害2、触电,",
      "安全措施": "做好防滑措施，铺设防滑布使用合格的电动工器具,",
      "技术要点": ""
    },
    "步序编号4": {
      "工时": "1h,",
      "步序": "4->5,",
      "作业方法": "打开通风口，检测氧含量,",
      "作业人员代码": "钳工1、钳工2、钳工3、钳工4、钳工5,",
      "使用工具、材料编号": "常用材料,破布,吸油毡,密封胶,废油桶,面团、B、C、D、E,",
      "危险源": "1、物体打击2、受限空间,",
      "安全措施": "人员合理站位半个小时检测一次氧含量,",
      "技术要点": "氧含量（大于19.5%）"
    },
    "步序编号5": {
      "工时": "1h,",
      "步序": "5->6,",
      "作业方法": "清理油箱内部,",
      "作业人员代码": "钳工3、钳工4、钳工5,",
      "使用工具、材料编号": "C、E、F、N、5,",
      "危险源": "1、滑跌伤害2、受限空间3、照明不良,",
      "安全措施": "做好防滑措施，铺设防滑布2、半个小时检测一次氧含量3、使用照明灯,",
      "技术要点": "氧含量（大于19.5%）"
    },
    "步序编号6": {
      "工时": "1h,",
      "步序": "6->7,",
      "作业方法": "回装通风口,",
      "作业人员代码": "钳工1、钳工2,",
      "使用工具、材料编号": "常用材料,破布,吸油毡,密封胶,废油桶,面团、B、3,",
      "危险源": "1、物体打击,",
      "安全措施": "1、人员合理站位,",
      "技术要点": "螺栓对角紧固"
    },
    "步序编号7": {
      "工时": "1h,",
      "步序": "7->8,",
      "作业方法": "新油加入,",
      "作业人员代码": "钳工1、钳工2、钳工3、钳工4、起重1,",
      "使用工具、材料编号": "G、I、K,",
      "危险源": "1、起重伤害2、物体打击3、滑跌伤害,",
      "安全措施": "1、起重工持证上岗，吊物绑扎牢固，人员合理站位2、人员合理站位3、做好防滑措施，铺设防滑布,",
      "技术要点": ""
    },
    "步序编号8": {
      "工时": "0.5h,",
      "步序": "8->9,",
      "作业方法": "现场清理,",
      "作业人员代码": "钳工2、钳工3、钳工4、钳工5,",
      "使用工具、材料编号": "6人、2,",
      "危险源": ",",
      "安全措施": ",",
      "技术要点": ""
    },
    "步序编号9": {
      "工时": "0.5h,",
      "步序": "8->10,",
      "作业方法": "三方确认摘牌试车,",
      "作业人员代码": "钳工1、点检、生产,",
      "使用工具、材料编号": ",",
      "危险源": ",",
      "安全措施": ",",
      "技术要点": ""
    }
  }
}
onMounted(async () => {  
  if (useChat.chatState) {
    const postData = {
      prompt: useChat.info
    }
    ChatAPI.getJsonResult(postData).then(res => {
      console.log(res.data);
      formInline.itemName = res.data["设备"]
      formInline.deviceName = useChat.deviceName
      formInline.allHours = res.data["总工时"]
      formInline.hours = res.data["项目时间"]
      dangerData.value.dange = res.data["危险源及环境因素"]
      dangerData.value.file = res.data["动火等级、灭火器材"]
      materailData.value.material = res.data["需用材料"]
      materailData.value.machine = res.data["需用工机具及编号"]
      materailData.value.people = res.data["工种代码"]
      let flowData = res.data["工时工序"]
      flowArray.value = []
      const keysArray = Object.keys(flowData);
      for (let index = 0; index < keysArray.length; index++) {
        const element = flowData[keysArray[index]];
        flowArray.value.push(element)
      }
      useChat.setChatState(false)
      loading.value = false
    })
  } else {
    //刷新
    if (localStorage.getItem("my-store") != null) {
      let result = useStorage('my-store', localStorage)      
      result3 = result.value
      formInline.itemName = result3["设备"]
      formInline.allHours = result3["总工时"]
      formInline.hours = result3["项目时间"]
      dangerData.value.dange = result3["危险源及环境因素"]
      dangerData.value.file = result3["动火等级、灭火器材"]
      materailData.value.material = result3["需用材料"]
      materailData.value.machine = result3["需用工机具及编号"]
      materailData.value.people = result3["工种代码"]
      let flowData = result3["工时工序"]
      flowArray.value = []
      const keysArray = Object.keys(flowData);
      for (let index = 0; index < keysArray.length; index++) {
        const element = flowData[keysArray[index]];
        flowArray.value.push(element)
      }
      useChat.setChatState(false)
      loading.value = false
    }
  }



  // if (useChat.info != '') {
  //   const postData = {
  //     prompt: useChat.info
  //   }
  //   formInline.deviceName = useChat.form.deviceName
  //   // const data = useStorage('my-store2',localStorage)
  //   // console.log(data);
  //   //判断是刷新还是请求
  //   if (useChat.chatState) {
  //     //请求

  //   } else {
  //     //刷新
  //     if (localStorage.getItem("my-store") != null) {
  //       let result = useStorage('my-store', localStorage)
  //       result3 = result.value
  //     } 
  //   }
  //   // setTimeout(() => {
  //   //   formInline.itemName = result3["设备"]
  //   //   dangerData.value.dange = result3["危险源及环境因素"]
  //   //   dangerData.value.file = result3["动火等级、灭火器材"]
  //   //   materailData.value.material = result3["需用材料"]
  //   //   materailData.value.machine = result3["需用工机具及编号"]
  //   //   materailData.value.people = result3["工种代码"]
  //   //   let flowData = result3["工时工序"]
  //   //   flowArray.value = []
  //   //   const keysArray = Object.keys(flowData);
  //   //   for (let index = 0; index < keysArray.length; index++) {
  //   //     const element = flowData[keysArray[index]];
  //   //     flowArray.value.push(element)
  //   //   }
  //   //   useChat.setChatState(false)
  //   //   loading.value = false
  //   // }, 2000)
  //   console.log(postData);

  //   ChatAPI.getJsonResult(postData).then(res => {
  //     console.log(res.data);
  //     formInline.itemName = res.data["设备"]
  //     dangerData.value.dange = res.data["危险源及环境因素"]
  //     dangerData.value.file = res.data["动火等级、灭火器材"]
  //     materailData.value.material = res.data["需用材料"]
  //     materailData.value.machine = res.data["需用工机具及编号"]
  //     materailData.value.people = res.data["工种代码"]
  //     let flowData = res.data["工时工序"]
  //     flowArray.value = []
  //     const keysArray = Object.keys(flowData);
  //     for (let index = 0; index < keysArray.length; index++) {
  //       const element = flowData[keysArray[index]];
  //       flowArray.value.push(element)
  //     }      
  //   useChat.setChatState(false)
  //     loading.value = false
  //   })


  // }
})
onUnmounted(() => {
  useChat.setChatInfo('')
})
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }

  .el-header {
    padding: 0;
  }
}

.operate {
  .button-group {
    float: right;
    width: 200px;
  }
}

.home-box {
  width: 100%;

  .main-content {
    width: 100%;
    height: auto;
    position: relative;
  }
}


.flow-box {
  width: 100%;
  height: 400px;
  // border: 1px solid black;
  position: relative;
}
</style>
